<template>
  <a-layout style="height: 100vh">
    <a-layout-sider theme="light" width="300">
      <a-layout style="height: 100vh">
        <a-layout-header style="background-color: #fff; padding-inline: 24px; border-bottom: 1px solid #DDD;">
          <a-space>
            <a-input placeholder="搜索">
              <template #prefix>
                <SearchOutlined />
              </template>
            </a-input>
            <a-tooltip placement="right">
              <template #title>添加好友</template>
              <a-button>
                <UsergroupAddOutlined />
              </a-button>
            </a-tooltip>
          </a-space>
        </a-layout-header>
        <a-layout-content style="height: calc(100vh - 64); overflow-y: auto; overflow-x: hidden">
          <div style="margin: 24px 0; text-align: center;">
            <a-button size="large" style="width: 80%;">
              <template #icon>
                <UsergroupAddOutlined />
              </template>
              通讯录管理
            </a-button>
          </div>
          <a-typography-text style="padding-left: 24px; color: #888;">新的朋友</a-typography-text>
          <a-list item-layout="horizontal" :data-source="data2">
            <template #renderItem="{ item }">
              <a-list-item class="list-item-acitve">
                <a-list-item-meta style="align-items: center;">
                  <template #title>新的朋友</template>
                  <template #avatar>
                    <a-avatar shape="square" size="large" :src="item.picture.large" />
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
          <a-divider style="margin-top: 0px; margin-bottom: 24px;" />
          <a-typography-text style="padding-left: 24px; color: #888;">应用</a-typography-text>
          <a-list item-layout="horizontal" :data-source="data2">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta style="align-items: center;">
                  <template #title>应用</template>
                  <template #avatar>
                    <a-avatar shape="square" size="large" :src="item.picture.large" />
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
          <a-divider style="margin-top: 0px; margin-bottom: 24px;" />
          <a-typography-text style="padding-left: 24px; color: #888;">群聊</a-typography-text>
          <a-list :loading="initLoading" item-layout="horizontal" :data-source="list">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-skeleton avatar :title="false" :loading="!!item.loading" active>
                  <a-list-item-meta style="align-items: center;">
                    <template #title>{{ item.name.last }}</template>
                    <template #avatar>
                      <a-avatar shape="square" size="large" :src="item.picture.large" />
                    </template>
                  </a-list-item-meta>
                </a-skeleton>
              </a-list-item>
            </template>
          </a-list>
          <a-divider style="margin-top: 0px; margin-bottom: 24px;" />
          <a-typography-text style="padding-left: 24px; color: #888;">好友</a-typography-text>
          <a-list class="demo-loadmore-list" :loading="initLoading" item-layout="horizontal" :data-source="list">
            <template #loadMore>
              <div v-if="!initLoading && !loading" :style="{
                textAlign: 'center',
                marginTop: '12px',
                height: '32px',
                lineHeight: '32px'
              }">
                <a-button @click="onLoadMore">loading more</a-button>
              </div>
            </template>
            <template #renderItem="{ item }">
              <a-list-item>
                <a-skeleton avatar :title="false" :loading="!!item.loading" active>
                  <a-list-item-meta style="align-items: center;">
                    <template #title>{{ item.name.last }}</template>
                    <template #avatar>
                      <a-avatar shape="square" size="large" :src="item.picture.large" />
                    </template>
                  </a-list-item-meta>
                </a-skeleton>
              </a-list-item>
            </template>
          </a-list>
        </a-layout-content>
      </a-layout>
    </a-layout-sider>
    <a-layout-content style="height: 100vh; border-left: 1px solid #DDD; background-color: #fff;">
      <a-layout style="height: 100vh;">
        <a-layout-header style="background-color: #fafafa; padding-inline: 24px; border-bottom: 1px solid #DDD;">
          <div style="font-size: large; line-height: 64px;">新的朋友</div>
        </a-layout-header>
        <a-layout-content style="height: calc(100vh - 64); overflow-y: auto; background-color: #fafafa;">

        </a-layout-content>
      </a-layout>
    </a-layout-content>
  </a-layout>
</template>
<script setup>
import { onMounted, ref, nextTick } from 'vue'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
const count = 3
const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`
const initLoading = ref(true)
const loading = ref(false)
const data = ref([])
const data2 = ref([])
const list = ref([])
onMounted(() => {
  fetch(fakeDataUrl)
    .then((res) => res.json())
    .then((res) => {
      initLoading.value = false
      data.value = res.results
      list.value = res.results
      data2.value = [].concat(res.results[0])
    })
})
const onLoadMore = () => {
  loading.value = true
  list.value = data.value.concat(
    [...new Array(count)].map(() => ({
      loading: true,
      name: {},
      picture: {}
    }))
  )
  fetch(fakeDataUrl)
    .then((res) => res.json())
    .then((res) => {
      const newData = data.value.concat(res.results)
      loading.value = false
      data.value = newData
      list.value = newData
      nextTick(() => {
        // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
        // In real scene, you can using public method of react-virtualized:
        // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
        window.dispatchEvent(new Event('resize'))
      })
    })
}
</script>
<style scoped>
.demo-loadmore-list {
  padding-bottom: 10px;
}
.list-item-acitve {
  background-color: #CCC !important;
}
.ant-list .ant-list-item:hover {
  background-color: #EEE;
}
</style>
